import React, { useState, useEffect } from 'react';
import { DualAxes } from '@ant-design/plots';
import { queryKRNum } from '@/services/panel'

const CircusPanel = (props) => {
  const [data, setData] = useState(null)
  const { year, quarter, type } = props
  const newlist = [
    {
      time: '2023-01',
      value: 35,
      count: 800,
    },
    {
      time: '2023-02',
      value: 42,
      count: 600,
    },
  ];
  const uvBillData = [
    {
      time: '2023-01',
      value: 12,
      type: 'o1',
    },
    {
      time: '2023-01',
      value: 10,
      type: 'o2',
    },
    {
      time: '2023-01',
      value: 8,
      type: 'o3',
    },
    {
      time: '2023-01',
      value: 9,
      type: 'o4',
    },
    {
      time: '2023-01',
      value: 5,
      type: 'o5',
    },
    {
      time: '2023-02',
      value: 18,
      type: 'o1',
    },
    {
      time: '2023-02',
      value: 12,
      type: 'o2',
    },
    {
      time: '2023-02',
      value: 14,
      type: 'o3',
    },
    {
      time: '2023-02',
      value: 15,
      type: 'o4',
    },
    {
      time: '2023-02',
      value: 10,
      type: 'o5',
    },
    {
      time: '2023-03',
      value: 26,
      type: 'o1',
    },
    {
      time: '2023-03',
      value: 21,
      type: 'o2',
    },
    {
      time: '2023-03',
      value: 20,
      type: 'o3',
    },
    {
      time: '2023-03',
      value: 18,
      type: 'o4',
    },
    {
      time: '2023-03',
      value: 15,
      type: 'o5',
    },
    {
      time: '2023-04',
      value: 35,
      type: 'o1',
    },
    {
      time: '2023-04',
      value: 30,
      type: 'o2',
    },
    {
      time: '2023-04',
      value: 22,
      type: 'o3',
    },
    {
      time: '2023-04',
      value: 19,
      type: 'o4',
    },
    {
      time: '2023-04',
      value: 20,
      type: 'o5',
    },
    {
      time: '2023-05',
      value: 47,
      type: 'o1',
    },
    {
      time: '2023-05',
      value: 37,
      type: 'o2',
    },
    {
      time: '2023-05',
      value: 26,
      type: 'o3',
    },  
    {
      time: '2023-05',
      value: 27,
      type: 'o4',
    },
    {
      time: '2023-05',
      value: 20,
      type: 'o5',
    },
    {
      time: '2023-06',
      value: 59,
      type: 'o1',
    },
    {
      time: '2023-06',
      value: 42,
      type: 'o2',
    },
    {
      time: '2023-06',
      value: 37,
      type: 'o3',
    },
    {
      time: '2023-06',
      value: 39,
      type: 'o4',
    },
    {
      time: '2023-06',
      value: 20,
      type: 'o5',
    },
    {
      time: '2023-07',
      value: 60,
      type: 'o1',
    },
    {
      time: '2023-07',
      value: 50,
      type: 'o2',
    },
    {
      time: '2023-07',
      value: 42,
      type: 'o3',
    },
    {
      time: '2023-07',
      value: 44,
      type: 'o4',
    },
    {
      time: '2023-07',
      value: 25,
      type: 'o5',
    },
    {
      time: '2023-08',
      value: 71,
      type: 'o1',
    },
    {
      time: '2023-08',
      value: 62,
      type: 'o2',
    },
    {
      time: '2023-08',
      value: 50,
      type: 'o3',
    },
    {
      time: '2023-08',
      value: 47,
      type: 'o4',
    },
    {
      time: '2023-08',
      value: 30,
      type: 'o5',
    },
    {
      time: '2023-09',
      value: 80,
      type: 'o1',
    },
    {
      time: '2023-09',
      value: 70,
      type: 'o2',
    },
    {
      time: '2023-09',
      value: 58,
      type: 'o3',
    },
    {
      time: '2023-09',
      value: 47,
      type: 'o4',
    },
    {
      time: '2023-09',
      value: 30,
      type: 'o5',
    },
    // {
    //   time: '2023-10',
    //   value: 87,
    //   type: 'o1',
    // },
    // {
    //   time: '2023-10',
    //   value: 75,
    //   type: 'o2',
    // },
    // {
    //   time: '2023-10',
    //   value: 66,
    //   type: 'o3',
    // },
    // {
    //   time: '2023-10',
    //   value: 55,
    //   type: 'o4',
    // },
    // {
    //   time: '2023-10',
    //   value: 47,
    //   type: 'o5',
    // },
    // {
    //   time: '2023-11',
    //   value: 92,
    //   type: 'o1',
    // },
    // {
    //   time: '2023-11',
    //   value: 88,
    //   type: 'o2',
    // },
    // {
    //   time: '2023-11',
    //   value: 72,
    //   type: 'o3',
    // },
    // {
    //   time: '2023-11',
    //   value: 62,
    //   type: 'o4',
    // },
    // {
    //   time: '2023-11',
    //   value: 56,
    //   type: 'o5',
    // },
    // {
    //   time: '2023-12',
    //   value: 100,
    //   type: 'o1',
    // },
    // {
    //   time: '2023-12',
    //   value: 100,
    //   type: 'o2',
    // },
    // {
    //   time: '2023-12',
    //   value: 88,
    //   type: 'o3',
    // },
    // {
    //   time: '2023-12',
    //   value: 79,
    //   type: 'o4',
    // },
    // {
    //   time: '2023-12',
    //   value: 72,
    //   type: 'o5',
    // },
  ];
  const transformData = [
    {
      time: '2023-01',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-01',
      count: 0,
      type: 'num2'
    },
    {
      time: '2023-01',
      count: 0,
      type: 'num3'
    },
    {
      time: '2023-01',
      count: 0,
      type: 'num4'
    },
    {
      time: '2023-01',
      count: 0,
      type: 'num5'
    },
    {
      time: '2023-02',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-02',
      count: 0,
      type: 'num2'
    },
    {
      time: '2023-02',
      count: 12,
      type: 'num3'
    },
    {
      time: '2023-02',
      count: 4,
      type: 'num4'
    },
    {
      time: '2023-02',
      count: 13,
      type: 'num5'
    },
    {
      time: '2023-03',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-03',
      count: 12,
      type: 'num2'
    },
    {
      time: '2023-03',
      count: 6,
      type: 'num3'
    },
    {
      time: '2023-03',
      count: 7,
      type: 'num4'
    },
    {
      time: '2023-03',
      count: 16,
      type: 'num5'
    },
    {
      time: '2023-04',
      count: 0,
      type: 'num1'
    }, 
    {
      time: '2023-04',
      count: 8,
      type: 'num2'
    },
    {
      time: '2023-04',
      count: 10,
      type: 'num3'
    },
    {
      time: '2023-04',
      count: 8,
      type: 'num4'
    },
    {
      time: '2023-04',
      count: 10,
      type: 'num5'
    },
    {
      time: '2023-05',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-05',
      count: 14,
      type: 'num2'
    },
    {
      time: '2023-05',
      count: 19,
      type: 'num3'
    },
    {
      time: '2023-05',
      count: 21,
      type: 'num4'
    },
    {
      time: '2023-05',
      count: 25,
      type: 'num5'
    },
    {
      time: '2023-06',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-06',
      count: 15,
      type: 'num2'
    },
    {
      time: '2023-06',
      count: 27,
      type: 'num3'
    },
    {
      time: '2023-06',
      count: 22,
      type: 'num4'
    },
    {
      time: '2023-06',
      count: 32,
      type: 'num5'
    },
    {
      time: '2023-07',
      count: 13,
      type: 'num1'
    },
    {
      time: '2023-07',
      count: 16,
      type: 'num2'
    },
    {
      time: '2023-07',
      count: 26,
      type: 'num3'
    },
    {
      time: '2023-07',
      count: 37,
      type: 'num4'
    },
    {
      time: '2023-07',
      count: 40,
      type: 'num5'
    },
    {
      time: '2023-08',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-08',
      count: 11,
      type: 'num2'
    },
    {
      time: '2023-08',
      count: 35,
      type: 'num3'
    },
    {
      time: '2023-08',
      count: 40,
      type: 'num4'
    },
    {
      time: '2023-08',
      count: 46,
      type: 'num5'
    },
    {
      time: '2023-09',
      count: 0,
      type: 'num1'
    },
    {
      time: '2023-09',
      count: 9,
      type: 'num2'
    },
    {
      time: '2023-09',
      count: 47,
      type: 'num3'
    },
    {
      time: '2023-09',
      count: 52,
      type: 'num4'
    },
    {
      time: '2023-09',
      count: 57,
      type: 'num5'
    },
    // {
    //   time: '2023-10',
    //   count: 0,
    //   type: 'num1'
    // },
    // {
    //   time: '2023-10',
    //   count: 0,
    //   type: 'num2'
    // },
    // {
    //   time: '2023-10',
    //   count: 59,
    //   type: 'num3'
    // },
    // {
    //   time: '2023-10',
    //   count: 67,
    //   type: 'num4'
    // },
    // {
    //   time: '2023-10',
    //   count: 72,
    //   type: 'num5'
    // },
    // {
    //   time: '2023-11',
    //   count: 0,
    //   type: 'num1'
    // },
    // {
    //   time: '2023-11',
    //   count: 0,
    //   type: 'num2'
    // },
    // {
    //   time: '2023-11',
    //   count: 72,
    //   type: 'num3'
    // },
    // {
    //   time: '2023-11',
    //   count: 79,
    //   type: 'num4'
    // },
    // {
    //   time: '2023-11',
    //   count: 89,
    //   type: 'num5'
    // },
    // {
    //   time: '2023-12',
    //   count: 0,
    //   type: 'num1'
    // },
    // {
    //   time: '2023-12',
    //   count: 0,
    //   type: 'num2'
    // },
    // {
    //   time: '2023-12',
    //   count: 100,
    //   type: 'num3'
    // },
    // {
    //   time: '2023-12',
    //   count: 100,
    //   type: 'num4'
    // },
    // {
    //   time: '2023-12',
    //   count: 100,
    //   type: 'num5'
    // },
  ];
  useEffect(()=>{
    setData(newlist)
    // getData()
  },[year, quarter, type])
  const getData = async () => {
    const res = await queryKRNum({year, quarter, type})
    if(res.code = 200){
      if(res.data.length > 0){
        const list = res.data.map((item)=>{
          return { type: item.ostatus,value: item.num }
        })
        // const numList = list.map(item => Number(item.value));
        // const num = numList.reduce((prev,next)=>{ return prev+next })
        
        // const newList = list.map((item)=>{
        //   const num2 = (Number(item.value)/num*100).toFixed(0);
        //   return { type: item.type, value: Number(num2) }
        // })
        setData(res.data);
      }
    }
  }
  const config = {
    data: [uvBillData, transformData],
    xField: 'time',
    yField: ['value','count'],
    geometryOptions: [
      {
        geometry: 'column',
        isGroup: true,
        seriesField: 'type',
        columnWidthRatio: 0.4,
        label: {},
        color: ['#c76114','#5B8FF9', '#5D7092','green','pink',],
        pattern: ({ type }) => {
          return {
            type: type === 'bill' ? 'square' : 'line',
          };
        },
      },
      {
        geometry: 'line',
        seriesField: 'type',
        color: ['#ff6100','#0000ff','#292421','#00ff00','red'],
      },
    ],
    legend: {
      custom: true,
      position: 'bottom',
      items: [
        {
          value: 'o1',
          name: 'O1',
          marker: {
            symbol: 'square',
            style: {
              fill: '#c76114',
              r: 5,
            },
          },
        },
        {
          value: 'o2',
          name: 'O2',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5B8FF9',
              r: 5,
            },
          },
        },
        {
          value: 'o3',
          name: 'O3',
          marker: {
            symbol: 'square',
            style: {
              fill: '#5D7092',
              r: 5,
            },
          },
        },
        {
          value: 'o4',
          name: 'O4',
          marker: {
            symbol: 'square',
            style: {
              fill: 'green',
              r: 5,
            },
          },
        },
        {
          value: 'o5',
          name: 'O5',
          marker: {
            symbol: 'square',
            style: {
              fill: 'pink',
              r: 5,
            },
          },
        },
        {
          value: 'num1',
          name: 'O1逾期概率',
          marker: {
            symbol: 'square',
            style: {
              fill: '#ff6100',
              r: 5,
            },
          },
        },
        {
          value: 'num2',
          name: 'O2逾期概率',
          marker: {
            symbol: 'square',
            style: {
              fill: '#0000ff',
              r: 5,
            },
          },
        },
        {
          value: 'num3',
          name: 'O3逾期概率',
          marker: {
            symbol: 'square',
            style: {
              fill: '#292421',
              r: 5,
            },
          },
        },
        {
          value: 'num4',
          name: 'O4逾期概率',
          marker: {
            symbol: 'square',
            style: {
              fill: '#00ff00',
              r: 5,
            },
          },
        },
        {
          value: 'num5',
          name: 'O5逾期概率',
          marker: {
            symbol: 'square',
            style: {
              fill: 'red',
              r: 5,
            },
          },
        },
      ],
    },
  };
  return <>{data && data.length >0 && <DualAxes {...config} />}</>;
};

export default CircusPanel